<template>
  <!-- 页面布局 -->
  <el-container style="height: 100vh;">
    <!-- 页面头部 -->
    <el-header style="background-color: #333; color: #fff; line-height: 60px;position: fixed; width: 100%; top: 0; z-index: 1000">
      <!-- 头部内容 -->
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
        <!-- 左侧标题 -->
        <div style="font-size: 18px; font-weight: bold;">仓库管理系统</div>
        <!-- 右侧下拉菜单 -->
        <el-dropdown>
          <span class="el-dropdown-link" style="display: flex; align-items: center;">
            <!-- 用户图标 -->
            <el-icon><User /></el-icon>
            <!-- 用户信息 -->
            <div style="display: flex; align-items: center;">
              <span>{{ name }}</span>
              <span v-if="role" style="font-size: 15px; color: #aaa; margin-left: 4px;">({{ role }})</span>
            </div>
            <!-- 下拉箭头图标 -->
            <el-icon class="el-icon--right" style="margin-left: 8px;">
              <ArrowDown />
            </el-icon>
          </span>
          <!-- 下拉菜单内容 -->
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 退出系统按钮 -->
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 页面主体内容 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" style="background-color: #444; color: #fff; margin-top: 50px;">
        <!-- 菜单 -->
        <el-menu
            default-active="/user/Main3/userhome"
            class="el-menu-vertical-demo"
            background-color="#444"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <!-- 首页菜单项 -->
          <el-menu-item index="/user/Main3/userhome">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <!-- 个人中心菜单项 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><ChatLineSquare /></el-icon>
              <span>个人信息管理</span>
            </template>
            <!-- 使用 query 参数传递 account -->
            <el-menu-item :index="`/user/Main3/user?account=${account}&name=${name}&role=${role}`">
              <el-icon><Message /></el-icon>个人信息表
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Discount /></el-icon>
              <span>货物信息管理</span>
            </template>
            <el-menu-item :index="`/user/Main3/goods3?name=${name}`"><el-icon><Notebook /></el-icon>货物管理</el-menu-item>
            <el-menu-item index="/user/Main3/goodsechart3"><el-icon><PieChart /></el-icon>货物图表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>信息查看</span>
            </template>
            <el-menu-item index="/user/Main3/category2"><el-icon><CollectionTag /></el-icon>分类查看</el-menu-item>
            <el-menu-item index="/user/Main3/warehouse2"><el-icon><Notebook /></el-icon>仓库查看</el-menu-item>
            <el-menu-item index="/user/Main3/announcement2"><el-icon><Memo /></el-icon>公告查看</el-menu-item>
            <el-menu-item index="/user/Main3/record2"><el-icon><Message /></el-icon>记录查看</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 主要内容区域 -->
      <el-main class="main-content" style="margin-top: 20px;">
        <!-- 路由视图 -->
        <router-view :key="$route.fullPath" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { useRouter, useRoute } from 'vue-router';
import {
  ArrowDown,
  ChatLineSquare, CollectionTag, Discount, Grid,
  HomeFilled,
  Management, Memo,
  Message, MessageBox,
  Notebook,
  PieChart, Tickets,
  User, UserFilled
} from "@element-plus/icons-vue";

export default {
  components: {
    MessageBox,
    Grid,
    Memo,
    UserFilled,
    CollectionTag,
    Tickets,
    Discount,
    PieChart,
    Notebook,
    Management,
    User,
    Message,
    ChatLineSquare,
    HomeFilled,
    ArrowDown,
  },

  setup() {
    // 路由相关
    const router = useRouter();
    const route = useRoute();
    const name = route.query.name || ''; // 获取 name
    const account = route.query.account || ''; // 获取 account 参数
    const role = route.query.role || '';// 角色

    // 将角色英文名字映射为中文
    const roleMap = {
      admin: '管理员',
      employee: '员工',
      user: '用户'
    };

    // 处理菜单选项选择
    const handleSelect = (index) => {
      router.push(index);
    };

    // 处理退出系统逻辑
    const logout = () => {
      router.push('/');
    };

    return {
      handleSelect,
      logout,
      name,
      role: roleMap[role] || '', // 使用映射后的中文角色名
      account // 将 account 返回以供传递
    };
  },
};
</script>

<style scoped>
.main-content {
  flex: 1;
  background-image: url('../images/2.png'); /* 确保路径正确 */
  background-size: cover;
  background-position: center;
  overflow: auto;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
  border-right: none;
}
</style>
